<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  

    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/iconfont.css" />
    <style type="text/css">
    /*
    	.mui-content{
    		position: absolute;
    		top: 18%;
			left: 4%;
			width:50%;
			height:30%;
			padding:10px;
			transform: translate(-50%, -50%);
    	}
    	#canvas{
    		border: solid #000000 1px;
    		position: absolute;
    		top: 50%;
			left: 50%;
			padding:10px;
			transform: translate(-50%, -50%);
    	}*/
    	#canvas{
    		display: block;
    		margin: 0px auto;
    	}
    	.mui-h4{
    		text-align: center;
    	}
    	.mui-grid-view{
    		margin-top:10px ;
    	}
    	.mui-slider{
    		margin-bottom:6px ;
    	}
    	.mui-icon{
    		color: #007AFF;
    	}
    	.mui-grid-view.mui-grid-9{ 
    		background-color: #EFEFF4;
    	}
    	.mui-table-view.mui-grid-view .mui-table-view-cell .email-info{
    		line-height: 17px;
    	}
    </style>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">主菜单</h1>
		<button class="mui-active-back mui-btn mui-btn-blue mui-btn-link mui-pull-left">
			<span class="mui-icon mui-icon-locked"></span>退出
		</button>
		<!--<button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">编辑</button>-->
	</header>
	<footer class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" href="tab-webview-subpage-chat.html">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item" href="tab-webview-subpage-contact.html">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">通讯录</span>
			</a>
			<a class="mui-tab-item" href="tab-webview-subpage-setting.html">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
	</footer>
	<div class="mui-content">
		<div class="mui-slider">
			<canvas id="canvas" width="150" height="150"></canvas>
			<h4 class="mui-h4">主人，欢迎您归来！</h4>
		</div>
		 <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="menu.html">
		                    <span class="mui-icon iconfont icon-qiu"></span>
		                    <div class="mui-media-body">双色球</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="ofo.html">
		                    <span class="mui-icon  mui-icon-email">
		                    <div class="mui-media-body email-info">信息箱</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="chat.html">
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body">对话</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">地图</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">搜索</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">电话</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-gear"></span>
		                    <div class="mui-media-body">设置</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-info"></span>
		                    <div class="mui-media-body">关于</div></a></li>
		           <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-more"></span>
		                    <div class="mui-media-body">更多</div></a></li>
		        </ul> 
	</div>	
</body>
<script type="text/javascript">
		
		window.onload=function(){
				draw();	
				show;
		}
		function draw() {
		  var canvas = document.getElementById('canvas');
		  if (canvas.getContext){
		    var ctx = canvas.getContext('2d');
		    ctx.beginPath();
		    ctx.fillStyle="#FFFF00";
		    ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制
		    ctx.fill();
		    
		    ctx.beginPath();
		    ctx.moveTo(110,75);
		    ctx.arc(75,75,35,0,Math.PI,false);   // 口(顺时针)
		    ctx.stroke();
		     
		    ctx.beginPath();
		    ctx.moveTo(65,65);
		    ctx.fillStyle="#000";
		    ctx.arc(60,65,5,0,Math.PI*2,true);  // 左眼
		    ctx.fill();
		    
		    ctx.beginPath();
		    ctx.moveTo(95,65);
		    ctx.fillStyle="#000";
		    ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼
		    ctx.fill();
		  }
		}	
		var show=setTimeout(function(){
			//window.location.href="menu.html";
		}, 2000);
		/*失败的居中
		 function mDiv(){
			var div=document.querySelector("div.mui-content");
			console.log(div);
			var top=(document.body.clientHeight-div.offsetHeight)/2;
			var left=(document.body.clientWidth-div.offsetWidth)/2;
			console.log(document.body.clientHeight,top,left);
			div.style.top=top;
			div.style.left=left;
		}
		 * */
		
	</script>
</html>